<!-- 组织架构 -->
<template>
  <div class="departments">
    <!-- 卡片容器 -->
    <el-card class="mycard">
      <el-tabs v-model="activelabe" class="mytabs">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- 内容区域 -->
      <div class="content">
        <!-- 总公司 -->
        <!--<el-row class="myrow">
          <el-col :span="12">
            <i class="el-icon-s-grid"></i>
            <span class="mytitle">北美极东支部逆熵科技有限公司</span>
          </el-col>
          对齐方式 右对齐 
          <el-col :span="12" style="text-align:right">
            <span class="manage">负责人</span>
            <el-dropdown class="mydown">
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row> -->
        <!-- 使用组件  可以添加一级部门-->
        <treetool :data="headData" @addShow="addShow"></treetool>
        <!-- 线 -->
        <div class="line"></div>
        <!-- 子公司  default-expand-all 自动展开-->
        <el-tree :data="data" default-expand-all>
          <!--  把数据data传到组件中，由组件进行处理，并展示  -->
          <!-- :xx=xx 组件传数据  、 @xx="xx" 组件联动控制由 :xx 传值(不一定为本行)-->
          <treetool slot-scope="{data}" :data="data" @updateData="getDepListApi" @addShow="addShow"
            @editShow="editShow"></treetool>
        </el-tree>
      </div>
    </el-card>
    <!-- diaglog面板   组件传数据  ----   简写法，也可以在methods里写函数处理-->
    <adddept ref="fn_td" :dialogShow.sync="dialogShow" :deptId="deptId" @updatedata="getDepListApi"
      @editShow="editShow"></adddept>
  </div>
</template>

<script>
// 导入tree组件
import treetool from './components/treetools.vue'
import adddept from './components/adddept.vue'
import { getDepListApi } from '@/api/departments'
export default {
  components: {
    treetool,
    adddept
  },
  methods: {
    // 获取组织架构的方法
    async getDepListApi () {
      try {
        // 发送请求到服务器
        const res = await getDepListApi()
        console.log(res)
        // 保存数据到data中
        this.data = this.switch_treefn(res.data.depts, '')
        // 取出第一条数据作为总公司头部数据
        this.headData = res.data.depts[0]
        this.headData.manager = "负责人"
        // 添加一个头部标识，用来区分头部只有一个功能，子部门有多个功能
        // id = 0的数据 有一条 为 isHead，但是对于其他条数据来说并没有这一项。所以这一项在其他数据看来就是假
        this.headData.isHead = true

      } catch (err) { console.log(err) }
    },
    switch_treefn (arr, pid) {
      const res = []
      // 遍历数据源，得到结构
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.switch_treefn(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      });
      return res
    },
    addShow (id) {
      this.dialogShow = true
      // 保存当前操作的部门id
      this.deptId = id
    },
    // 打开编辑面板
    editShow (id) {
      this.dialogShow = true
      this.deptId = id
      // 调用编辑面板方法 (父组件调子组件  在子组件处声明属性 ref)
      this.$refs.fn_td.getDeptDeail(id)
    }
    /*
    myclose(val){
       this.dialogShow = val
    } 
    */
  },
  data () {
    return {
      // 
      activelabe: 'first',
      // 树状结构数据
      data: [
        {}
      ],
      // 头部数据
      headData: {},
      // 控制添加面板开启/关闭
      dialogShow: false,
      // 选中某条目之后获取到的id
      deptId: ''
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  // 因为要打开页面的时候就要调用，所以要写在这里
  created () {
    // 获取组织架构列表
    this.getDepListApi()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}

</script>
<style lang = 'scss' scoped>
/* @import url(); 引入css类 */
.departments {
  .mycard {
    // 距离departments盒子全方位间隔20px
    margin: 20px;

    .mytabs {
      margin: 30px;
    }

    .content {
      margin: 0 90px;

      .line {
        height: 1px;
        background-color: #ccc;
        margin: 20px 0px;
      }

      .myrow {
        .mytitle {
          font-weight: 700;
        }

        .manage {
          font-size: 14px;
        }

        .mydown {
          margin-left: 20px;

        }
      }

    }
  }
}
</style>